<template>
	<view class="escort-detail">

		<!-- 陪诊员 -->
		<view class="escort-info-card">
			<view class="escort-title">陪诊员信息</view>
			<view class="escort-content">
				<text class="escort-name">{{ escort.name }}</text>
				<text class="escort-age">年龄: {{ getAge(escort.age) }} 岁</text>
				<text class="escort-address">地址: {{ escort.addressInfo }}</text>
			</view>
		</view>

		<!-- 图文详情 -->
		<view class="image-gallery">
			<view class="gallery-title">个性化展示</view>
			<scroll-view scroll-y="true" style="width: 100%; height: calc(100vh - 400rpx);">
				<block v-for="(imgSrc, index) in imageList" :key="index">
					<image :src="imgSrc" mode="widthFix"
						style="width: 100%; height: auto; display: block; margin-bottom: 10rpx;"></image>
				</block>
			</scroll-view>
		</view>

		<!-- 预约按钮固定在底部 -->
		<button class="appointment-btn" @click="handleAppointment">预约</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const app = getApp();
	const escort = ref({});
	const imageList = ref([]);
	const hid = ref(0);

	const getAge = (birthDate) => {
		const today = new Date();
		const birth = new Date(birthDate);
		let age = today.getFullYear() - birth.getFullYear();
		const m = today.getMonth() - birth.getMonth();
		if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
			age--;
		}
		return age;
	};

	onLoad((options) => {
		if (options.escort) {
			escort.value = JSON.parse(decodeURIComponent(options.escort));
			// 假设图片链接是以逗号分隔的字符串
			if (escort.value.picture) {
				imageList.value = escort.value.picture.split(',').map(url => url.trim());
			}
		}
		hid.value = options.id;
	});

	const handleAppointment = (options) => {
		uni.navigateTo({
			url: `/pages/service/index?escort=${encodeURIComponent(JSON.stringify(escort.value))}&hid=${hid}&stype=1`
		});
	};
</script>

<style>
	.escort-detail {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f8f8f8;
		color: #666;
		height: 100vh;
		/* 确保整个页面高度占满屏幕 */
	}

	.navbar-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #a6d9b3;
	}

	.back-button {
		font-size: 50rpx;
		color: #a6d9b3;
	}

	.escort-info-card {
		width: 90%;
		margin-bottom: 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.escort-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #a6d9b3;
		margin-bottom: 20rpx;
	}

	.escort-name {
		font-size: 46rpx;
		font-weight: bold;
		color: #a62;
	}

	.escort-content {
		border: 2px solid #a6d9b3;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;
	}

	.escort-content text {
		display: block;
		margin-bottom: 20rpx;
		/* 增加间距以区分每一行 */
		font-size: 32rpx;
		/* 调整字体大小使内容更显眼 */
	}

	/* .escort-name, */
	.escort-age,
	.escort-address {
		border-bottom: 1px solid #e0e0e0;
		/* 添加底部边框来区分不同信息 */
		padding-bottom: 10rpx;
		margin-bottom: 10rpx;
	}

	.image-gallery {
		width: 90%;
		margin-bottom: 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		flex-grow: 1;
		/* 让 image-gallery 占据剩余空间 */
	}

	.gallery-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #a6d9b3;
		margin-bottom: 20rpx;
	}

	.appointment-btn {
		width: 70%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #0BB684;
		color: #fff;
		font-size: 36rpx;
		letter-spacing: 0.2em;
		border-radius: 10rpx;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1000;
		/* 确保按钮在最上层 */
	}
</style>